import { FC, Suspense, } from 'react';
import styles from './app.module.less';
import { Outlet, Link, useLocation } from 'react-router-dom';
import Loading from '@/components/Loading/Loading';
import zx1 from '@/assets/img/phone.png'
import zx2 from '@/assets/img/yx.png'
import zx3 from '@/assets/img/zb.png'
import ewm1 from '@/assets/img/ewm1.png'
import ewm2 from '@/assets/img/ewm2.png'

const App: FC = () => {
  const location = useLocation();

  return (
    <div className={styles.page}>
      <header className={styles.header}>
        <div className={styles.wrap}>

          <div className={styles.logo}>
            <Link to='/' target="_parent"></Link>
          </div>
          <nav className={styles.nav}>
            <ul className={styles.menu_ul}>
              <li className={location.pathname === '/' ? styles.active : ""}>
                <Link to="/" target="_parent">首页</Link>
              </li>
              {/* <li className={location.pathname.indexOf('Solution') > -1 ? styles.active : ""}>
                <Link to="Solution" target="_parent">解决方案</Link>
              </li> */}
              <li className={location.pathname.indexOf('Product') > -1 ? styles.active : ""}>
                <Link to="Product" target="_parent">产品</Link>
              </li>
              <li className={location.pathname.indexOf('about') > -1 ? styles.active : ""}>
                <Link to="about" target="_parent">关于我们</Link>
              </li>

            </ul>
          </nav>
          <div style={{ width: 221 }}></div>
        </div>
      </header>
      <div className={styles.main}>
        <div className={styles.wrap}>
          <Suspense fallback={<Loading />}>
            <Outlet />
          </Suspense>
        </div>
      </div>
      <div className={styles.start_}>
        <div className={styles['background-media']}></div>
        <div className={styles['background-color']}></div>
        <div className={styles.container}>
          <div className={styles.row} >
            <div className={styles.headerTitle}>智能，从这里开始</div>
            <div className={styles.btnWrap}>
              <button>申请试用(暂未开放)</button>
            </div>
          </div>
        </div>
      </div>
      <footer className={styles.footer}>
        <div className={styles.container}>
          <div className={styles.row}>

            <div className={styles.center}>
              <div className={styles.wrap}>
                <div className={styles.headerTitle}>联系我们</div>
                <div className={styles.info}>
                  <p><img src={zx1} />&nbsp;&nbsp;957 95114</p>
                  <p><img src={zx2} />&nbsp;&nbsp;business@95114.cn</p>
                  <p><img src={zx3} />&nbsp;&nbsp;北京市朝阳区西坝河南路1号4号楼金泰大厦1106室
                  </p>
                </div>
              </div>
            </div>
            <div className={styles.right}>
              <div className={styles.wrap}>
                <div className={styles.headerTitle}>帮助中心</div>
                <div className={styles.info}>
                  <p><Link to="about" target="_parent">关于我们</Link></p>
                  {/* <p><Link to='Solution' target="_parent">解决方案</Link></p> */}
                  <p><Link to='Product' target="_parent">产品</Link></p>
                </div>
              </div>
            </div>

            <div className={styles.followUs}>
              <div className={styles.headerTitle}>关注我们</div>
              <div className={styles.info}>
                <div>
                  <img src={ewm1} />
                  <h3>公众号二维码</h3>
                </div>
                <div>
                  <img src={ewm2} />
                  <h3>官网二维码</h3>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className={styles.tort}>© 2014-2023 微呼科技 |</div>
      </footer>
    </div>
  );
};

export default App;
